-
-
Notifications
You must be signed in to change notification settings - Fork 1.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[charts] Use real world data for PieChart
examples
#14297
Conversation
Deploy preview: https://deploy-preview-14297--material-ui-x.netlify.app/ |
CodSpeed Performance ReportMerging #14297 will not alter performanceComparing Summary
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I like the OS dataset. That's for sure something user will understand :)
Co-authored-by: Alexandre Fauquette <[email protected]> Signed-off-by: Jose C Quintas Jr <[email protected]>
Co-authored-by: Alexandre Fauquette <[email protected]> Signed-off-by: Jose C Quintas Jr <[email protected]>
This pull request has conflicts, please resolve those before we can evaluate the pull request. |
Signed-off-by: Jose C Quintas Jr <[email protected]>
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks super nice. I enjoyed reading back this docs page with the new demo 👍
}, | ||
]; | ||
|
||
const normalize = (v: number, v2: number) => Number.parseFloat(((v * v2) / 100).toFixed(2)); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Recently found that formatting method which simplify the management of digits after comma
new Intl.NumberFormat('de-DE', { style: 'percent', maximumFractionDigits: 2 }).format(
number,
),
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I don't think using the number format would be better in this case, we are clipping the number number so they are easier to read, yes, but they also need to be a numeric value, while Intl.NumberFormat
would format it to a user to see, like adding .
in the hundreds, eg: 1000
-> 1.000
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
What triggered me is the .toFixed(2)
before parsing.
You have do
- number computation
(v * v2) / 100)
- transformation to string
.toFixed(2)
- transformation to number
Number.parseFloat
()
Whereas you could
- have the correct numbers by doing only the
(v * v2) / 100)
in thenormalize
- display value as expected with
const valueFormatter = new Intl.NumberFormat('de-DE', { style: 'percent', maximumFractionDigits: 2 }).format;
Intl.NumberFormat
would format it to a user to see, like adding . in the hundreds, eg: 1000 -> 1.000
Yes, and with style: 'percent'
it will add the percentage sygn, plus some space according to the locale, an manage rounding the values to get the correct number of digits, ...
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ah, that could be an options yes.
I don't think it matters much though, since we also have the data as 11.11
in the other dataset, this ensures all datasets have the same precision. 😅
Pie charts are quite simple charts that can't contain a lot of data, and our examples were geared towards that optimistic view.
Real world usage however, is more complicated.
I've tried using world population datasets (by continent and sub-regions, eg: Europe (continent), Balkans (sub-continent). But that created charts with too many small slices, due to what I guess is population concentration 🙃
My second try was internet browser usage, and landed on
Platforms
andOperating Systems (by platform)
which provided a nice mix of very simple to slightly more complex data.December 2023
Other
and removingTablet
fromplatforms
Data points
platforms
: 2 data pointsdesktopOS
: 5mobileOS
: 3 (only used inmobileAndDesktopOS
)mobileAndDesktopOS
: 8Preview
https://deploy-preview-14297--material-ui-x.netlify.app/x/react-charts/pie/
Side by Side comparison